<template>
	<m-block class="balanceBox" spa="40 0 20" radius="20">
		<m-block class="wallet_box flex-between plr-36 pt-12" @click="Jump(`/pages/wallet/wallet?coinCode=1`)">
			<view class="price_box">
				<view class="flex">
					<text class="pr-8 fs30">现金余额</text>
					<m-icon size="25" spa="0 0 0 4" color="#fff" type="icon-shuangjiantou-xia"></m-icon>
				</view>
				<view class="mt-4">{{ myBalance | integer(2, true) }}</view>
			</view>
			<view class="wallet_btn" @click.stop="Jump('/pages/wallet/withdraw/withdraw')">兑换</view>
		</m-block>
		<m-block class="flex-column ptb-12">
			<view class="flex-between mtb-20">
				<view class="flex flex-1 pl-48" @click="Jump(`/pages/wallet/wallet?coinCode=2`)">
					<m-image :size="[75,75]" src="../static/images/pages/wallet/balance02.png" class="mr-24" />
					<view class="">
						<view class="flex fs24">
							<text>收益值</text>
							<m-icon size="25" spa="0 0 0 4" color="#C2C2C2" type="icon-shuangjiantou-xia"></m-icon>
						</view>
						<m-number :value="userbalance[2]['balance']"></m-number>
					</view>
				</view>
				<view class="flex flex-1"  @click="Jump(`/pages/wallet/wallet?coinCode=4`)">
					<m-image :size="[75,75]" src="../static/images/pages/wallet/balance03.png" class="mr-24" />
					<view class="">
						<view class="flex fs24">
							<text>消费积分</text>
							<m-icon size="25" spa="0 0 0 4" color="#C2C2C2" type="icon-shuangjiantou-xia"></m-icon>
						</view>
						<m-number :value="userbalance[4]['balance']"></m-number>
					</view>
				</view>
			</view>
			<view class="flex-between ptb-16">
				<view class="flex flex-1 pl-48"  @click="Jump(`/pages/wallet/wallet?coinCode=3`)">
					<m-image :size="[75,75]" src="../static/images/pages/wallet/balance04.png" class="mr-24" />
					<view class="">
						<view class="flex fs24">
							<text>购物券</text>
						<m-icon size="25" spa="0 0 0 4" color="#C2C2C2" type="icon-shuangjiantou-xia"></m-icon>
						</view>
						<m-number :value="userbalance[3]['balance']"></m-number>
					</view>
				</view>
				<view class="flex flex-1"  @click="Jump(`/pages/wallet/wallet?coinCode=5`)">
					<m-image :size="[75,75]" src="../static/images/pages/wallet/balance05.png" class="mr-24" />
					<view class="">
						<view class="flex fs24">
							<text>权益积分</text>
							<m-icon size="25" spa="0 0 0 4" color="#C2C2C2" type="icon-shuangjiantou-xia"></m-icon>
						</view>
						<m-number :value="userbalance[5]['balance']"></m-number>
					</view>
				</view>
			</view>
		</m-block>
		<m-block bgColor="#e5f3da" radius="0 0 20 20" gap="20 60" class="flex-between" @click="Jump(`/pages/wallet/wallet?coinCode=6`)">
			<view  class="flex">
				<m-icon size="48" spa="0 0 0 4" color="#07bc77" type="icon-shuju8" class="mr-24"></m-icon>
				<!-- <m-image :size="[40,40]" src="../../static/images/icon/yj.png" class="mr-24" /> -->
				<text class="fs26">贡献值：</text>
				<m-number :value="userbalance[6]['balance']" color="#07bc77"></m-number>
			</view>
			<view class="">
				<text class="fs24">明细</text>
				<m-icon size="25" spa="0 0 0 4" color="#333" type="icon-shuangjiantou-xia"></m-icon>
			</view>
		</m-block>
		
	</m-block>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'mbalance',
		data() {
			return {
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				userbalance: state => state.user.userbalance
			}),
			myBalance() {
				return this.userbalance[1].balance - this.userbalance[1].lockbalance;
			}
		},
		methods: {
			goDown() {
				if (!this.downLink) return this.Toast('系统打包升级中')
				try {
					// #ifdef APP-PLUS
					this.openURL({ openUrl: this.downLink })
					// #endif
					// #ifndef APP-PLUS
					this.openURL({ openUrl: this.downLink, openType: '1' })
					// #endif
				} catch (e) {
					this.Toast(e)
				}
			}
		},
	}
</script>

<style lang="scss">
	.balanceBox {
		.wallet_box {
			box-sizing: border-box;
			width: 100%;
			height: 150rpx;
			background: linear-gradient(-82deg, #DED65B, #18C03B);
			border-radius: 20rpx 20rpx 0rpx 0px;

			.price_box {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;

				view:nth-of-type(2) {
					font-size: 48rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}

			.wallet_btn {
				background: #ffffff;
				border-radius: 30rpx;
				padding: 15rpx 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #18c03b;
			}
		}
	}
</style>